use crate::components::{
    component::App,
    prompt_content,
    enums::{
        AppMode, PromptLevel, ProtocolType
    }
};
use ratatui::{Frame, prelude::*, widgets::*};

mod http_ui;
mod popup;
mod render;
mod tcp_udp_ui;

/// 第一刀 root_chunks 垂直切2部分。顶上部分是高度为1的 帮助栏root_chunks[0] 和 自适应整体高度的 主 内容区root_chunks[1]
/// 第二刀 在root_chunks[0] 里再垂直切4部分，得到main_chunks
pub fn ui(f: &mut Frame, app: &mut App) {
    // 1. 最顶层布局：切分出“帮助文本区”和“主应用区”
    let root_chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Length(1), // 第1行，高度为1，用于帮助文本
            Constraint::Min(0),    // 剩余所有空间，用于原来的主界面
        ])
        .split(f.area()); // 切割整个 Frame

    // 2. 绘制帮助文本到最顶部的区域
    let help_message = match app.mode {
        AppMode::Normal => {
            // 区分两个页面显示的帮助信息
            if app.protocol == ProtocolType::Http {
                "Press 's/h/p/b' to edit,'k' to clean, 'm' to change method,'c' to change content-type, 'TAB' to switch page, 'Esc' to quit."
            } else {
                "Press 'TAB' to switch page, 'Esc' to quit."
            }
        }
        AppMode::ConfirmingQuit => "Are you sure you want to quit? (Y/N)",
        AppMode::ConfirmingSwitchProtocol => "Are you sure you want to switch protocol? (Y/N)",
        _ => "Press 'Enter' to confirm, 'Esc' to cancel.",
    };
    let help_paragraph = Paragraph::new(help_message)
        .style(Style::default().fg(Color::DarkGray))
        .alignment(Alignment::Center);
    f.render_widget(help_paragraph, root_chunks[0]); // 渲染到第1行

    // 3. 【修改】将原有的主布局应用到“主应用区”
    // 注意这里切割的是 `root_chunks[1]`，而不是 `f.size()` 或 `f.area()`
    let main_chunks = Layout::default()
        .direction(Direction::Vertical)
        .margin(1) // margin 依然保留
        .constraints([
            Constraint::Length(3), // 连接面板
            Constraint::Min(3),    // 发送数据区
            Constraint::Fill(1),   // 接收数据区
            Constraint::Length(3), // 日志区
        ])
        .split(root_chunks[1]); // <--- 关键变化在这里！

    // 4. 【不变】根据协议渲染主界面的具体内容
    match app.protocol {
        ProtocolType::Tcp | ProtocolType::Udp => tcp_udp_ui::ui(f, app, &main_chunks),
        ProtocolType::Http => http_ui::ui(f, app, &main_chunks),
    }

    // 5.以下状态，要弹出确认框
    match app.mode {
        AppMode::ConfirmingQuit => popup::ui(
            f,
            PromptLevel::Error,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_QUIT,
        ),
        AppMode::ConfirmingSwitchProtocol => popup::ui(
            f,
            PromptLevel::Warning,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_SWITCH_PROTOCOL,
        ),
        AppMode::ConfirmingHttpRequesting => popup::ui(
            f,
            PromptLevel::Normal,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_HTTP_REQUESTING,
        ),
        AppMode::ConfirmingClearScreen => popup::ui(
            f,
            PromptLevel::Warning,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_CLEAR_SCREEN,
        ),
        AppMode::ConfirmingConnect => popup::ui(
            f,
            PromptLevel::Warning,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_CONNECT,
        ),
        AppMode::ConfirmingSend => popup::ui(
            f,
            PromptLevel::Warning,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_SEND,
        ),
        AppMode::ConfirmingDisconnect => popup::ui(
            f,
            PromptLevel::Warning,
            " Warning ",
            prompt_content::PROMPT_CONFIRM_DISCONNECT,
        ),
        _ => (),
    }
}
